<template>
  <!--音乐播放器封装 -->
  <div class="player">
    <div class="player-container">
      <!-- 歌曲信息 -->
      <div class="player-left">
        <img class="pointer img-border" v-lazy="imgInfo.imgUrl" @click="openPlayView" />
        <div class="music-info">
          <div class="font-14 w-150 text-hidden font-color">{{ imgInfo.name }}</div>
          <div class="font-12 w-100 text-hidden font-color">{{ imgInfo.author }}</div>
        </div>
      </div>
      <!-- 播放器 -->
      <div class="player-wrapper">
        <!-- 播放器按钮 -->
        <div class="player-bar">
          <button class="player-bar-btn" @click="lastMusic"
            :class="{ 'player-bar-btn_disabled': playType === 'personalFm' }">
            <i class="iconfont icon-shangyishou"></i>
          </button>
          <button class="player-bar-btn" @click="pause">
            <i v-show="isPlay" class="iconfont icon-zanting"></i>
            <i v-show="!isPlay" class="iconfont icon-bofang"></i>
          </button>
          <button class="player-bar-btn" @click="nextMusic">
            <i class="iconfont icon-xiayishou"></i>
          </button>
        </div>
        <!-- 进度条 -->
        <div class="time-progress">
          <span class="font-12">{{
            currenMusicInfo.currenTime | timeFormat
          }}</span>
          <el-slider v-model="curren" class="timeSlider" :show-tooltip="false" @change="changeCurrenTime"
            :disabled="musicUrl == ''"></el-slider>
          <span class="font-12">{{
            (currenMusicInfo.totalTime) | timeFormat
          }}</span>
        </div>
      </div>
      <div class="btn-other">
        <!-- 音量按钮 -->
        <div class="dowmload" v-if="this.musicUrl !== ''">
          <i class="el-icon-download volume-icon mright-20 pointer" @click="download"></i>
        </div>
        <div class="volume">
          <div @click="isMute = !isMute">
            <i v-if="volume == 0" class="iconfont icon-shengyinguanbi volume-icon pointer"></i>
            <i v-else class="iconfont icon-shengyin volume-icon pointer"></i>
          </div>

          <div class="volume-slider">
            <el-slider v-model="volume" vertical height="200px"> </el-slider>
          </div>
        </div>
        <!-- 当前播放列表 -->
        <div class="curren-list" v-show="playType !== 'personalFm'">
          <i @click="showList" class="iconfont icon-liebiaoshunxu volume-icon pointer"></i>
        </div>
      </div>
    </div>
    <!-- 播放详情的界面 -->
    <el-drawer :visible.sync="PlayViewDrawer" direction="btt" size="100%" :before-close="handleClose" :show-close="false"
      :modal="false">
      <template #title>
        <div id="point">
          <i class="el-icon-arrow-down pointer" @click="PlayViewDrawer = false"></i>
        </div>
      </template>
      <div id="wrap_ban">
        <div class="play-view">
          <div class="music-info">
            <div class="music-title">{{ imgInfo.name }}</div>
            <div class="music-author">{{ imgInfo.author }}</div>
            <div class="lyric-view">
              <div class="img-wrap">
                <div class="changzhen pointer" :class="{ 'changzhen-active': isPlay }" @click="pause">
                  <img src="../../assets/img/changzhen.png" alt="" />
                </div>
                <div class="changpian" :class="{ 'changpian-active': isPlay }">
                  <div class="changpian-wrap">
                    <img :src="imgInfo.imgUrl" />
                  </div>
                </div>
              </div>
              <LyricWrap :currenTime="currenMusicInfo.currenTime" :musicId="currenMusicId" :musicList="musicList">
              </LyricWrap>
            </div>
          </div>
        </div>
        <div id="svg">
          <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg"
            class="transition duration-300 ease-in-out delay-150">
            <defs>
              <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
                <stop offset="5%" stop-color="#F78DA7"></stop>
                <stop offset="95%" stop-color="#8ED1FC"></stop>
              </linearGradient>
            </defs>
            <path
              d="M 0,700 C 0,700 0,140 0,140 C 63.68717948717949,135.0897435897436 127.37435897435898,130.17948717948718 200,116 C 272.625641025641,101.82051282051283 354.18974358974356,78.37179487179489 447,97 C 539.8102564102564,115.62820512820511 643.8666666666667,176.33333333333331 731,186 C 818.1333333333333,195.66666666666669 888.3435897435897,154.29487179487182 974,150 C 1059.6564102564103,145.70512820512818 1160.7589743589745,178.48717948717947 1241,183 C 1321.2410256410255,187.51282051282053 1380.6205128205129,163.75641025641028 1440,140 C 1440,140 1440,700 1440,700 Z"
              stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.265"
              class="transition-all duration-300 ease-in-out delay-150 path-0"></path>

            <defs>
              <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
                <stop offset="5%" stop-color="#F78DA7"></stop>
                <stop offset="95%" stop-color="#8ED1FC"></stop>
              </linearGradient>
            </defs>
            <path
              d="M 0,700 C 0,700 0,280 0,280 C 61.84871794871793,293.0076923076923 123.69743589743587,306.0153846153846 197,292 C 270.30256410256413,277.9846153846154 355.0589743589744,236.94615384615383 439,247 C 522.9410256410256,257.05384615384617 606.0666666666666,318.20000000000005 703,325 C 799.9333333333334,331.79999999999995 910.6743589743589,284.25384615384615 1001,277 C 1091.325641025641,269.74615384615385 1161.2358974358974,302.7846153846154 1231,310 C 1300.7641025641026,317.2153846153846 1370.3820512820512,298.60769230769233 1440,280 C 1440,280 1440,700 1440,700 Z"
              stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.4"
              class="transition-all duration-300 ease-in-out delay-150 path-1"></path>

            <defs>
              <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
                <stop offset="5%" stop-color="#F78DA7"></stop>
                <stop offset="95%" stop-color="#8ED1FC"></stop>
              </linearGradient>
            </defs>
            <path
              d="M 0,700 C 0,700 0,420 0,420 C 94.6846153846154,439.8025641025641 189.3692307692308,459.60512820512815 271,444 C 352.6307692307692,428.39487179487185 421.20769230769224,377.38205128205135 493,376 C 564.7923076923078,374.61794871794865 639.8,422.8666666666666 708,436 C 776.2,449.1333333333334 837.5923076923078,427.15128205128207 927,418 C 1016.4076923076922,408.84871794871793 1133.8307692307692,412.5282051282051 1224,415 C 1314.1692307692308,417.4717948717949 1377.0846153846155,418.7358974358974 1440,420 C 1440,420 1440,700 1440,700 Z"
              stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53"
              class="transition-all duration-300 ease-in-out delay-150 path-2"></path>

            <defs>
              <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
                <stop offset="5%" stop-color="#F78DA7"></stop>
                <stop offset="95%" stop-color="#8ED1FC"></stop>
              </linearGradient>
            </defs>
            <path
              d="M 0,700 C 0,700 0,560 0,560 C 88.5025641025641,561.6025641025641 177.0051282051282,563.2051282051282 250,560 C 322.9948717948718,556.7948717948718 380.48205128205126,548.7820512820513 445,533 C 509.51794871794874,517.2179487179487 581.0666666666666,493.66666666666674 676,510 C 770.9333333333334,526.3333333333333 889.251282051282,582.551282051282 982,594 C 1074.748717948718,605.448717948718 1141.9282051282053,572.1282051282051 1214,559 C 1286.0717948717947,545.8717948717949 1363.0358974358974,552.9358974358975 1440,560 C 1440,560 1440,700 1440,700 Z"
              stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1"
              class="transition-all duration-300 ease-in-out delay-150 path-3"></path>
          </svg>
        </div>
      </div>
    </el-drawer>
    <audio ref="audioRef" :src="musicUrl" autoplay @ended="nextMusic" @timeupdate="updateCurrenTime"></audio>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { downloadMusic } from "@/api/api_music";
import LyricWrap from "./LyricWrap.vue";
let imgUrl = require("@/assets/img/music.png");
export default {
  components: { LyricWrap },
  data() {
    return {
      musicUrl:"", //音乐资源
      volume: 50, //音量
      saveVolume: 50, //静音前保存的音量
      isMute: false, //是否是静音
      imgInfo: {
        //img区域信息，图片，歌名，歌手
        imgUrl:imgUrl,
        name: "未有歌曲",
        author:"未有歌手名",
      },
      curren: 0, //进度条的百分比
      PlayViewDrawer: false,
    };
  },
  computed: {
    ...mapState([
      "isPlay",
      "currenMusicId",
      "currenIndex",
      "musicList",
      "currenMusicInfo",
      "historyList",
      "isLogin",
      "playType",
    ]),
  },
  watch: {
    /* 通过Vuex管理的播放状态,audio会自动播放 */
    isPlay(val) {
      /* 由于misicUrl第一次是状态改变后获取，所以第一次改变不要进入监听 */
      if (this.musicUrl === "") return;
      if (val) {
        this.$refs.audioRef.play();
      } else {
        this.$refs.audioRef.pause();
      }
    },
    /* 监听静音状态 */
    isMute(val) {
      if (val) {
        this.saveVolume = this.volume;
        this.volume = 0;
      } else {
        this.volume = this.saveVolume;
      }
    },
    /* 监听音量的改变 */
    volume() {
      this.changeVolume();
    },
    currenMusicId() {
      this.getMusicUrl();
      if (this.PlayViewDrawer) {
        document.querySelector(".player .el-drawer__body").scrollTop = 0;
      }
    },
  },
  created() {
    this.getHistory();
  },
  mounted(){
      //在这里可以将本地存储的最近歌曲进行播放
      //但是不要先进行播放！！！那个暂停状态可以停止一下
      this.playMusicAll();
      setTimeout(this.pause,200)
  },
  methods: {
    /* 播放历史歌曲 */
    playMusicAll() { 
      if (this.historyList.length == 0) return;
      let id = this.historyList[0].id;
      this.$store.dispatch("playMusic", {
        list: this.historyList,
        id,
      });
    },
    /* 获取历史播放 */
    getHistory() {
      if (!window.localStorage.getItem("historylist")) return;
      this.$store.commit("setHistoryList", {
        type: "get",
        data: JSON.parse(window.localStorage.getItem("historylist")),
      });
    },
    /* 更新历史播放 */
    setHistory() {
      let music=this.musicList[this.currenIndex]
      // http://10.134.18.251:8080/api/NCmusic/pic/5.jpg   
      const ipReg=/^(http:\/\/).+(8080.*)/
      let {picUrl,url}=music;
      picUrl=picUrl.replace(ipReg,"$1localhost:$2");
      url=url.replace(ipReg,"$1localhost:$2");

      this.$store.commit("setHistoryList", {
        type: "unshift",
        data: {...this.musicList[this.currenIndex],picUrl,url}
      });
    },
    /* 暂停 */
    pause() {
      if (this.musicUrl.length === 0) return;
      this.$store.commit("setPlayState", !this.isPlay);
    },
    /* 获取音乐地址 */
    async getMusicUrl() {
      this.getImgInfo();
      this.getToltime();

      const music = this.musicList.find(
        (item) => item.id === this.currenMusicId
      );
      this.musicUrl = music.url;
    },
    /* 获取图片信息 */
    getImgInfo() {
      if (this.musicList[this.currenIndex].picUrl) {
        this.imgInfo.imgUrl = this.musicList[this.currenIndex].picUrl;
      } else {
        this.imgInfo.imgUrl = imgUrl;
      }
      this.imgInfo.author = this.musicList[this.currenIndex].artist;
      this.imgInfo.name = this.musicList[this.currenIndex].title;
      this.setHistory();
    },
    /* 获取歌曲时长 */
    getToltime() {
      this.$store.commit("setTotalTime", this.musicList[this.currenIndex].time);
    },
    /* 下一首 */
    nextMusic() {
      if (this.playType === "music") {
        if (this.currenIndex != this.musicList.length - 1) {
          this.$store.commit("setCurrenIndex", this.currenIndex + 1);
          this.$store.commit(
            "setCurrenMusicId",
            this.musicList[this.currenIndex].id
          );
          this.$store.commit("setPlayState", true);
        } else {
          this.$store.commit("setPlayState", false);
          this.$message.error("已经是最后一首了！");
        }
      }
    },
    /* 上一首 */
    lastMusic() {
      if (this.playType == "music") {
        if (this.currenIndex != 0) {
          this.$store.commit("setCurrenIndex", this.currenIndex - 1);
          this.$store.commit(
            "setCurrenMusicId",
            this.musicList[this.currenIndex].id
          );
          this.$store.commit("setPlayState", true);
        } else {
          this.$store.commit("setPlayState", false);
          this.$message.error("已经是第一首了");
        }
      }
    },

    /* 改变音量 */
    changeVolume() {
      this.$refs.audioRef.volume = this.volume / 100;
    },
    /* 展示播放列表 */
    showList() {
      this.$store.commit("setDrawerMusicList", true);
    },
    /* 更新当前播放时间 */
    updateCurrenTime() {
      if (!this.$refs.audioRef) return;
      /* 通过audio对象的方法获取当前时间 */
      let time = this.$refs.audioRef.currentTime;

      time = Math.floor(time);
      /* 同步进度条 */
      if (time != this.currenMusicInfo.currenTime) {
        this.$store.commit("setCurrenTime", time);
        let percent =
          ((this.currenMusicInfo.currenTime) /
            this.currenMusicInfo.totalTime) *
          100;
        percent = Math.floor(percent);
        this.curren = percent;
      }
    },
    /* 拖动进度条的回调，手动改变播放进度 */
    changeCurrenTime(val) {
      let time = ((val / 100) * this.currenMusicInfo.totalTime);
      this.$refs.audioRef.currentTime = time;
    },
    /* 下载 */
    download() {
      if (this.musicUrl == "") return;
      downloadMusic(
        this.musicUrl,
        `${this.imgInfo.name}-${this.imgInfo.author}`
      );
    },
    /* 打开歌曲播放页 */
    openPlayView() {
      if (this.musicUrl == "") return;
      if (this.playType === "music") {
        this.PlayViewDrawer = true;
        this.$nextTick(() => {
          document.querySelector(".player .el-drawer__body").scrollTop = 0;
        });
      }
    },
    /* 抽屉关闭的回调 */
    handleClose() {
      this.PlayViewDrawer = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/less/lessConfig.less";

/* 整体 */
.player {
  height: 100%;
}

.font-color {
  color: #fff;
}

.player-container {
  box-sizing: border-box;
  border-top: 1px solid @shallow;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: @shallow;
}

/* 播放器左边的信息区 */
.player-left {
  display: flex;
  align-items: center;
  position: relative;
  width: 300px;

  img {
    margin: 0 10px;
    height: 50px;
    width: 50px;
    border-radius: 8px;
  }

  &-info {
    margin: 10px;
    line-height: 20px;

    .info-title {
      div {
        display: inline-block;
      }
    }
  }
}

/* 中间的按钮区 */
.player-bar {
  width: 300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-top: 6px;
  justify-content: space-around;

  &-btn {
    outline: none;
    border: none;
    background-color: #fff;
    cursor: pointer;

    .iconfont {
      font-size: 18px;
    }

    &:nth-child(2) {
      height: 32px;
      width: 32px;
      border-radius: 50%;
      background-color: #f4f4f4;
      display: flex;
      align-items: center;
      justify-content: center;

      .iconfont {
        font-size: 16px;
      }

      .icon-bofang {
        position: relative;
        left: 2px;
      }
    }

    &:hover {
      color: #419cec;
    }
  }

  &-btn_disabled {
    cursor: not-allowed;
    color: #e5e5e5;

    &:hover {
      color: #e5e5e5;
    }
  }
}

/* 时间进度条 */
.time-progress {
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeSlider {
  width: 460px;
  margin: 0 10px;
}

/* 右侧按钮 */
.btn-other {
  display: flex;
  width: 300px;
  padding-right: 15px;
  justify-content: flex-end;
}

/* 音量图标 */
.volume-icon {
  font-size: 24px;
}

.volume {
  position: relative;
  margin-right: 20px;

  .volume-slider {
    display: none;
    position: absolute;
    top: -220px;
    left: -3px;
    background-color: #ffffff;
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0 0 10px #bbbbbb;
  }

  &:hover .volume-slider {
    display: block;
  }
}

::v-deep .el-drawer {
  background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

/* 播放界面抽屉 */
.play-view {
  width: 100%;
  margin: 0 auto;
  padding: 0 20%;
  position: absolute;
  z-index: 20;
  top: 0px;


  .music-info {
    margin: 0 auto;

    .music-title {
      text-align: center;
      font-size: 30px;
    }

    .music-author {
      text-align: center;
    }
  }

  .comment-view {
    margin-bottom: 80px;
  }
}

/* 歌词及唱片区域 */
.lyric-view {
  display: flex;

  .img-wrap {
    position: relative;

    .changzhen {
      position: absolute;
      top: -20px;
      left: 130px;
      width: 120px;
      transform-origin: 3px 3px;
      transition: all 0.5s;
      z-index: 20;

      img {
        width: 120px;
      }
    }

    .changpian {
      margin-top: 40px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background-color: #c4c3c6;
      display: flex;
      justify-content: center;
      align-items: center;

      .changpian-wrap {
        width: 240px;
        height: 240px;
        background-color: #1a1c1e;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      img {
        width: 180px;
        height: 180px;
        border-radius: 50%;
      }
    }
  }
}

.changzhen-active {
  transform: rotate(30deg);
}

.changpian-active {
  animation: circle 30s infinite linear;
}

@keyframes circle {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@media screen and(max-width:768px) {
  .btn-other {
    display: none;
  }

  .time-progress {
    display: none;
  }

  .player-bar {
    margin-top: 0;
    width: 150px;

    &-btn {
      &:nth-child(1) {
        display: none;
      }
    }
  }

  .play-view {
    padding: 0 10px;
  }

  .img-wrap {
    display: none;
  }
}



#wrap_ban {
  height: 100%;
  overflow: hidden;
  position: relative;
  bottom: 0px;

  #point {
    position: relative;
    z-index: 21;
  }

  #svg {
    position: relative;
    bottom: 0px;
  }
}

#svg {
  height: 100vh;
}
svg{
  transform: scaleY(120%);
}
/* 下面这块还是要去搞媒体查询才行的 */

@media screen and (max-width:1200px) {
  svg{
  transform: scaleY(400%);
}
}
</style>

<style>
.path-0 {
  animation: pathAnim-0 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pathAnim-0 {
  0% {
    d: path("M 0,700 C 0,700 0,140 0,140 C 63.68717948717949,135.0897435897436 127.37435897435898,130.17948717948718 200,116 C 272.625641025641,101.82051282051283 354.18974358974356,78.37179487179489 447,97 C 539.8102564102564,115.62820512820511 643.8666666666667,176.33333333333331 731,186 C 818.1333333333333,195.66666666666669 888.3435897435897,154.29487179487182 974,150 C 1059.6564102564103,145.70512820512818 1160.7589743589745,178.48717948717947 1241,183 C 1321.2410256410255,187.51282051282053 1380.6205128205129,163.75641025641028 1440,140 C 1440,140 1440,700 1440,700 Z");
  }

  25% {
    d: path("M 0,700 C 0,700 0,140 0,140 C 93.7794871794872,155.35384615384615 187.5589743589744,170.7076923076923 260,183 C 332.4410256410256,195.2923076923077 383.5435897435897,204.52307692307693 469,183 C 554.4564102564103,161.47692307692307 674.2666666666667,109.2 763,94 C 851.7333333333333,78.8 909.3897435897436,100.67692307692306 986,117 C 1062.6102564102564,133.32307692307694 1158.174358974359,144.09230769230768 1237,147 C 1315.825641025641,149.90769230769232 1377.9128205128204,144.95384615384614 1440,140 C 1440,140 1440,700 1440,700 Z");
  }

  50% {
    d: path("M 0,700 C 0,700 0,140 0,140 C 83.19230769230768,147.4589743589744 166.38461538461536,154.91794871794875 257,160 C 347.61538461538464,165.08205128205125 445.6538461538461,167.78717948717946 523,177 C 600.3461538461539,186.21282051282054 657,201.93333333333334 717,177 C 777,152.06666666666666 840.3461538461538,86.4794871794872 933,88 C 1025.6538461538462,89.5205128205128 1147.6153846153845,158.14871794871794 1237,178 C 1326.3846153846155,197.85128205128206 1383.1923076923076,168.92564102564103 1440,140 C 1440,140 1440,700 1440,700 Z");
  }

  75% {
    d: path("M 0,700 C 0,700 0,140 0,140 C 96.7051282051282,134.54102564102564 193.4102564102564,129.08205128205128 260,126 C 326.5897435897436,122.9179487179487 363.06410256410254,122.21282051282051 445,114 C 526.9358974358975,105.78717948717949 654.3333333333333,90.06666666666666 752,89 C 849.6666666666667,87.93333333333334 917.6025641025642,101.5205128205128 988,119 C 1058.3974358974358,136.4794871794872 1131.2564102564104,157.85128205128206 1207,162 C 1282.7435897435896,166.14871794871794 1361.371794871795,153.07435897435897 1440,140 C 1440,140 1440,700 1440,700 Z");
  }

  100% {
    d: path("M 0,700 C 0,700 0,140 0,140 C 63.68717948717949,135.0897435897436 127.37435897435898,130.17948717948718 200,116 C 272.625641025641,101.82051282051283 354.18974358974356,78.37179487179489 447,97 C 539.8102564102564,115.62820512820511 643.8666666666667,176.33333333333331 731,186 C 818.1333333333333,195.66666666666669 888.3435897435897,154.29487179487182 974,150 C 1059.6564102564103,145.70512820512818 1160.7589743589745,178.48717948717947 1241,183 C 1321.2410256410255,187.51282051282053 1380.6205128205129,163.75641025641028 1440,140 C 1440,140 1440,700 1440,700 Z");
  }
}
</style>
<style>
.path-1 {
  animation: pathAnim-1 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pathAnim-1 {
  0% {
    d: path("M 0,700 C 0,700 0,280 0,280 C 61.84871794871793,293.0076923076923 123.69743589743587,306.0153846153846 197,292 C 270.30256410256413,277.9846153846154 355.0589743589744,236.94615384615383 439,247 C 522.9410256410256,257.05384615384617 606.0666666666666,318.20000000000005 703,325 C 799.9333333333334,331.79999999999995 910.6743589743589,284.25384615384615 1001,277 C 1091.325641025641,269.74615384615385 1161.2358974358974,302.7846153846154 1231,310 C 1300.7641025641026,317.2153846153846 1370.3820512820512,298.60769230769233 1440,280 C 1440,280 1440,700 1440,700 Z");
  }

  25% {
    d: path("M 0,700 C 0,700 0,280 0,280 C 98.07435897435897,286.5615384615385 196.14871794871794,293.12307692307695 266,300 C 335.85128205128206,306.87692307692305 377.47948717948725,314.0692307692307 454,312 C 530.5205128205127,309.9307692307693 641.9333333333333,298.6 738,288 C 834.0666666666667,277.4 914.7871794871794,267.5307692307692 997,262 C 1079.2128205128206,256.4692307692308 1162.917948717949,255.27692307692308 1237,259 C 1311.082051282051,262.7230769230769 1375.5410256410255,271.36153846153843 1440,280 C 1440,280 1440,700 1440,700 Z");
  }

  50% {
    d: path("M 0,700 C 0,700 0,280 0,280 C 71.17948717948715,260.61538461538464 142.3589743589743,241.23076923076923 222,234 C 301.6410256410257,226.76923076923077 389.7435897435897,231.69230769230774 467,249 C 544.2564102564103,266.30769230769226 610.6666666666667,295.99999999999994 682,314 C 753.3333333333333,332.00000000000006 829.5897435897434,338.3076923076923 928,331 C 1026.4102564102566,323.6923076923077 1146.9743589743591,302.7692307692308 1236,292 C 1325.0256410256409,281.2307692307692 1382.5128205128203,280.61538461538464 1440,280 C 1440,280 1440,700 1440,700 Z");
  }

  75% {
    d: path("M 0,700 C 0,700 0,280 0,280 C 89.43333333333334,306.73333333333335 178.86666666666667,333.46666666666664 257,318 C 335.1333333333333,302.53333333333336 401.9666666666666,244.86666666666667 467,227 C 532.0333333333334,209.13333333333333 595.2666666666667,231.06666666666666 686,243 C 776.7333333333333,254.93333333333334 894.9666666666667,256.8666666666667 989,254 C 1083.0333333333333,251.13333333333333 1152.8666666666668,243.46666666666664 1224,247 C 1295.1333333333332,250.53333333333336 1367.5666666666666,265.26666666666665 1440,280 C 1440,280 1440,700 1440,700 Z");
  }

  100% {
    d: path("M 0,700 C 0,700 0,280 0,280 C 61.84871794871793,293.0076923076923 123.69743589743587,306.0153846153846 197,292 C 270.30256410256413,277.9846153846154 355.0589743589744,236.94615384615383 439,247 C 522.9410256410256,257.05384615384617 606.0666666666666,318.20000000000005 703,325 C 799.9333333333334,331.79999999999995 910.6743589743589,284.25384615384615 1001,277 C 1091.325641025641,269.74615384615385 1161.2358974358974,302.7846153846154 1231,310 C 1300.7641025641026,317.2153846153846 1370.3820512820512,298.60769230769233 1440,280 C 1440,280 1440,700 1440,700 Z");
  }
}
</style>

<style>
.path-2 {
  animation: pathAnim-2 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pathAnim-2 {
  0% {
    d: path("M 0,700 C 0,700 0,420 0,420 C 94.6846153846154,439.8025641025641 189.3692307692308,459.60512820512815 271,444 C 352.6307692307692,428.39487179487185 421.20769230769224,377.38205128205135 493,376 C 564.7923076923078,374.61794871794865 639.8,422.8666666666666 708,436 C 776.2,449.1333333333334 837.5923076923078,427.15128205128207 927,418 C 1016.4076923076922,408.84871794871793 1133.8307692307692,412.5282051282051 1224,415 C 1314.1692307692308,417.4717948717949 1377.0846153846155,418.7358974358974 1440,420 C 1440,420 1440,700 1440,700 Z");
  }

  25% {
    d: path("M 0,700 C 0,700 0,420 0,420 C 93.45384615384617,405.1846153846154 186.90769230769234,390.3692307692308 257,383 C 327.09230769230766,375.6307692307692 373.8230769230769,375.7076923076923 458,378 C 542.1769230769231,380.2923076923077 663.8000000000001,384.79999999999995 742,399 C 820.1999999999999,413.20000000000005 854.976923076923,437.0923076923076 930,437 C 1005.023076923077,436.9076923076924 1120.2923076923078,412.8307692307693 1212,406 C 1303.7076923076922,399.1692307692307 1371.853846153846,409.58461538461535 1440,420 C 1440,420 1440,700 1440,700 Z");
  }

  50% {
    d: path("M 0,700 C 0,700 0,420 0,420 C 97.45897435897436,432.6025641025641 194.91794871794872,445.20512820512823 261,455 C 327.0820512820513,464.79487179487177 361.7871794871794,471.78205128205127 439,463 C 516.2128205128206,454.21794871794873 635.9333333333334,429.66666666666674 720,434 C 804.0666666666666,438.33333333333326 852.479487179487,471.55128205128204 927,460 C 1001.520512820513,448.44871794871796 1102.148717948718,392.12820512820514 1192,378 C 1281.851282051282,363.87179487179486 1360.925641025641,391.93589743589746 1440,420 C 1440,420 1440,700 1440,700 Z");
  }

  75% {
    d: path("M 0,700 C 0,700 0,420 0,420 C 59.633333333333354,404.7717948717949 119.26666666666671,389.54358974358973 213,397 C 306.7333333333333,404.45641025641027 434.5666666666667,434.59743589743596 509,440 C 583.4333333333333,445.40256410256404 604.4666666666667,426.06666666666666 684,417 C 763.5333333333333,407.93333333333334 901.5666666666668,409.1358974358974 985,408 C 1068.4333333333332,406.8641025641026 1097.2666666666667,403.3897435897436 1164,405 C 1230.7333333333333,406.6102564102564 1335.3666666666668,413.3051282051282 1440,420 C 1440,420 1440,700 1440,700 Z");
  }

  100% {
    d: path("M 0,700 C 0,700 0,420 0,420 C 94.6846153846154,439.8025641025641 189.3692307692308,459.60512820512815 271,444 C 352.6307692307692,428.39487179487185 421.20769230769224,377.38205128205135 493,376 C 564.7923076923078,374.61794871794865 639.8,422.8666666666666 708,436 C 776.2,449.1333333333334 837.5923076923078,427.15128205128207 927,418 C 1016.4076923076922,408.84871794871793 1133.8307692307692,412.5282051282051 1224,415 C 1314.1692307692308,417.4717948717949 1377.0846153846155,418.7358974358974 1440,420 C 1440,420 1440,700 1440,700 Z");
  }
}
</style>

<style>
.path-3 {
  animation: pathAnim-3 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pathAnim-3 {
  0% {
    d: path("M 0,700 C 0,700 0,560 0,560 C 88.5025641025641,561.6025641025641 177.0051282051282,563.2051282051282 250,560 C 322.9948717948718,556.7948717948718 380.48205128205126,548.7820512820513 445,533 C 509.51794871794874,517.2179487179487 581.0666666666666,493.66666666666674 676,510 C 770.9333333333334,526.3333333333333 889.251282051282,582.551282051282 982,594 C 1074.748717948718,605.448717948718 1141.9282051282053,572.1282051282051 1214,559 C 1286.0717948717947,545.8717948717949 1363.0358974358974,552.9358974358975 1440,560 C 1440,560 1440,700 1440,700 Z");
  }

  25% {
    d: path("M 0,700 C 0,700 0,560 0,560 C 96.5205128205128,545.1051282051282 193.0410256410256,530.2102564102563 267,537 C 340.9589743589744,543.7897435897437 392.3564102564103,572.2641025641027 474,569 C 555.6435897435897,565.7358974358973 667.5333333333334,530.7333333333332 764,513 C 860.4666666666666,495.26666666666677 941.5102564102563,494.80256410256413 1000,521 C 1058.4897435897437,547.1974358974359 1094.425641025641,600.0564102564102 1164,611 C 1233.574358974359,621.9435897435898 1336.7871794871794,590.9717948717948 1440,560 C 1440,560 1440,700 1440,700 Z");
  }

  50% {
    d: path("M 0,700 C 0,700 0,560 0,560 C 85.95128205128205,566.123076923077 171.9025641025641,572.2461538461538 258,578 C 344.0974358974359,583.7538461538462 430.3410256410257,589.1384615384616 499,592 C 567.6589743589743,594.8615384615384 618.7333333333332,595.1999999999999 697,596 C 775.2666666666668,596.8000000000001 880.7256410256412,598.0615384615384 978,588 C 1075.2743589743588,577.9384615384616 1164.3641025641025,556.5538461538462 1240,550 C 1315.6358974358975,543.4461538461538 1377.8179487179486,551.7230769230769 1440,560 C 1440,560 1440,700 1440,700 Z");
  }

  75% {
    d: path("M 0,700 C 0,700 0,560 0,560 C 69.22564102564101,559.3538461538461 138.45128205128202,558.7076923076922 224,552 C 309.548717948718,545.2923076923078 411.42051282051284,532.5230769230769 489,527 C 566.5794871794872,521.4769230769231 619.8666666666666,523.1999999999999 702,540 C 784.1333333333334,556.8000000000001 895.1128205128207,588.676923076923 987,585 C 1078.8871794871793,581.323076923077 1151.6820512820511,542.0923076923077 1224,532 C 1296.3179487179489,521.9076923076923 1368.1589743589743,540.9538461538461 1440,560 C 1440,560 1440,700 1440,700 Z");
  }

  100% {
    d: path("M 0,700 C 0,700 0,560 0,560 C 88.5025641025641,561.6025641025641 177.0051282051282,563.2051282051282 250,560 C 322.9948717948718,556.7948717948718 380.48205128205126,548.7820512820513 445,533 C 509.51794871794874,517.2179487179487 581.0666666666666,493.66666666666674 676,510 C 770.9333333333334,526.3333333333333 889.251282051282,582.551282051282 982,594 C 1074.748717948718,605.448717948718 1141.9282051282053,572.1282051282051 1214,559 C 1286.0717948717947,545.8717948717949 1363.0358974358974,552.9358974358975 1440,560 C 1440,560 1440,700 1440,700 Z");
  }
}
</style>